<template>
  <a-modal
    title="快递信息"
    :width="800"
    :visible="visible"
    :confirmLoading="loading"
    @ok="() => { $emit('ok') }"
    @cancel="() => { $emit('cancel') }">
    <a-spin :spinning="loading">
      <a-form
        :form="form"
        v-bind="formLayout">
        <a-row :gutter="24">
          <a-col :span="12" v-show="false">
            <a-form-item label="expressId">
              <a-input
                placeholder="主键"
                v-decorator="['expressId']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发件人">
              <a-input
                placeholder="请输入发件人姓名"
                v-decorator="['sender',{ rules: [{ required: true, message: '请输入发件人' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发件人联系方式">
              <a-input
                placeholder="请输入发件人联系方式"
                v-decorator="['senderContactWay']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="收件人">
              <a-input
                placeholder="请输入发件人姓名"
                v-decorator="['receiver', { rules: [{ required: true, message: '请输入收件人' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="收件人联系方式">
              <a-input
                placeholder="请输入收件人联系方式"
                v-decorator="['receiverContactWay']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="签收人">
              <a-input
                placeholder="请输入签收人姓名"
                v-decorator="['signer']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="快递公司">
              <a-input
                placeholder="请输入快递公司"
                v-decorator="['expressCompany',{ rules: [{ required: true, message: '请输入快递公司' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="发件日期">
              <a-date-picker
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['sendDate']"
                placeholder="请输入发件日期" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="签收日期">
              <a-date-picker
                valueFormat="YYYY-MM-DD hh:mm:ss"
                v-decorator="['receiveDate']"
                placeholder="请输入签收日期" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="收件地址">
              <a-input
                placeholder="请输入收件地址"
                v-decorator="['receiverAddress']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="快递单号">
              <a-input
                placeholder="请输入快递单号"
                v-decorator="['trackingNumber', { rules: [{ required: true, message: '请输入快递单号' }] }]" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="快递内容">
              <a-input
                placeholder="请输入快递内容"
                v-decorator="['trackingContent']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="备注">
              <a-input
                placeholder="请输入备注"
                v-decorator="['note']" />
            </a-form-item>
          </a-col>
          <a-col :span="12" v-show="!isEdit && fsave">
            <a-form-item label="附件上传">
              <a-upload-dragger
                name="file"
                :multiple="true"
                action="#"
                :file-list="fileList"
                :custom-request="uploadFile"
                @change="handleChange">
                <p class="ant-upload-drag-icon">
                  <a-icon type="inbox" />
                </p>
                <p class="ant-upload-text">
                  点击或拖拽文件上传
                </p>
              </a-upload-dragger>
            </a-form-item>
            <a-form-item label="附件ID" v-show="false">
              <a-input
                v-decorator="['fileIds']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import pick from 'lodash.pick'
import { saveFile } from '@/api/manage'
// 表单字段
const fields = ['id', 'brand', 'productName', 'note', 'files']

export default {
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    loading: {
      type: Boolean,
      default: () => false
    },
    fsave: {
      type: Boolean,
      default: () => false
    },
    model: {
      type: Object,
      default: () => null
    },
    isEdit: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    this.formLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 13 }
      }
    }
    return {
      form: this.$form.createForm(this),
      fileList: []
    }
  },
  methods: {
    handleChange ({ fileList }) {
      this.fileList = fileList
    },
    resetFileList () {
      this.fileList = []
    },
    uploadFile (e) {
      const param = new FormData()
      param.append('file', e.file)
      saveFile(param)
        .then(res => {
          e.onSuccess({ uid: e.file.uid, name: res.data.fileName, status: 'done', url: res.data.fileUrl, fileId: res.data.fileId }, e)
          // 提交时只去状态是done的文件
          if (this.fileList) {
            const fileList = this.fileList.filter((item) => item.status === 'done')
            if (fileList) {
              const fileIds = []
              for (const item of fileList) {
                fileIds.push(item.response.fileId)
              }
              this.form.setFieldsValue({ fileIds: fileIds.join(',') })
            }
          }
        }).catch(() => e.onError({ status: 'error', url: '' }, e)
      )
    }
  },
  created () {
    // 防止表单未注册
    fields.forEach(v => this.form.getFieldDecorator(v))

    // 当 model 发生改变时，为表单设置值
    this.$watch('model', () => {
      this.model && this.form.setFieldsValue(pick(this.model, fields))
    })
  }
}
</script>
